<template>
  <view class="setting-group" :class="{ bordered, 'no-header': noHeader }">
    <view v-if="!noHeader" class="group-header">
      <text>{{ title }}</text>
      <slot name="header"></slot>
    </view>
    <view class="group-body">
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    title?: string
    bordered?: boolean
  }>(),
  {
    bordered: true,
  }
)
const slots = useSlots()

const noHeader = computed(() => !props.title && !slots.header)
</script>

<style lang="less">
.setting-group {
  --horizontalGap: 32rpx;
  .group-header {
    padding: 16rpx var(--horizontalGap);
    font-weight: 400;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #a4a8b0;
    border-bottom: 1px solid #e9e9ed;
    border-top: 1px solid #e9e9ed;
  }
  &.bordered .group-body {
    // border: 1rpx solid #e9e9ed;
    // border-bottom: 1px solid #e9e9ed;
    position: relative;
    border-width: 1rpx 0;
    &::after {
      position: absolute;
      content: '';
      display: block;
      bottom: 0%;
      width: calc(100% - 32rpx);
      left: 32rpx;
      height: 2rpx;
      background-color: #e9e9ed;
    }
    &:last-of-type::after {
      display: none;
    }

    & setting-row:first-child {
      & ::before {
        display: none;
      }
    }
  }
  &.no-header .group-body {
    & setting-row:first-child {
      & ::before {
        display: block;
      }
    }
  }
}

setting-group + setting-group > .setting-group > .group-header {
  padding-top: 32rpx;
}
setting-row + setting-group > .setting-group.no-header > .group-body {
  border-top: none;
}
.setting-group .group-body > setting-group:last-child > .setting-group > .group-body {
  border-bottom: none;
}
</style>
